KURS CSS

Treść

Właściwości tła

Tło jednokolorowe

Tło jednokolorowe wstawiamy w CSS instrtukcją background-color:kolor;. Wartość koloru można podać we wszystkich formatach rozpoznawanych przez CSS. Div posiada tło background-color:cyan


Wstawianie grafiki jako tła

Selektor { background-image: url(ścieżka dostępu do obrazka) }.
Polecenie pozwala wstawić dowolny obrazek jako tło pod elementem. Pamiętaj jednak, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie.


Różne sposoby powtarzania grafiki w tle

selektor { background-repeat: powtarzanie }
- repeat - powtarzanie tła w obu kierunkach (domyślnie)
- repeat-x - powtarzanie tła tylko w kierunku poziomym
- repeat-y - powtarzanie tła tylko w kierunku pionowym
- no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
- space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta w płaszczyźnie poziomej(CSS 3 - MSIE 9, Opera)
- round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta w płaszczyźnie pionowej(CSS 3 - MSIE 9, Opera)

Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są ustawiane obok siebie tak, że zajmują cały obszar tła. Ale możliwe jest również zdefiniowanie powtarzania w poziomie czy w pionie lub całkowite zablokowanie.


Powtarzanie w poziomie


Powtarzanie w pionie


Bez powtarzania


Równomierne rozłożenie w poziomie


Równomierne rozłożenie w pionie


Pozycjonowanie

Pozwala ustalić pozycję obrazka w tle.
Selektor { background-position: pozycja }
Jako "pozycja" należy wpisać:
Jedną wartość:
center - obrazek na środku (w centrum)
left - obrazek po lewej
right - po prawej
top - na górze
bottom - na dole
jednostka długości - odległość od lewej krawędzi

Dwie wartości (oddzielone spacją):
left top - lewy-górny róg
left bottom - lewy-dolny róg
right top - prawy-górny róg
right bottom - prawy-dolny róg
dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej
Przy wstawianiu więcej niż jednego obrazka jako tła, stosujemy przecinek jako rozdzielenie kolejnych pozycji(zestawu danych).


Pozycjonowanie równomierne pionowe


Gradient pionowy w górę czarno biały


Gradient w prawy dolny róg czarno biały


Gradient pionowy w góre czarno biały